home *** CD-ROM | disk | FTP | other *** search
/ PC go! 2017 October / PCgo 10-2017 CD-ROM Germany.iso / nw.pak / Unnamed File 000191.txt < prev    next >
Encoding:
Text File  |  2015-07-29  |  2.7 KB  |  74 lines
  1. <!--
  2. Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
  3. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  4. The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  5. The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  6. Code distributed by Google as part of the polymer project is also
  7. subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  8. --><!--
  9. @group Polymer Core Elements
  10.  
  11. The `<core-selection>` element is used to manage selection state. It has no
  12. visual appearance and is typically used in conjunction with another element.
  13. For example, [core-selector](#core-selector)
  14. uses a `<core-selection>` to manage selection.
  15.  
  16. To mark an item as selected, call the `select(item)` method on 
  17. `<core-selection>`. The item itself is an argument to this method.
  18.  
  19. The `<core-selection>`element manages selection state for any given set of
  20. items. When an item is selected, the `core-select` event is fired.
  21.  
  22. The attribute `multi` indicates if multiple items can be selected at once.
  23.   
  24. Example:
  25.  
  26.     <polymer-element name="selection-example">
  27.        <template>
  28.          <style>
  29.            polyfill-next-selector { content: ':host > .selected'; }
  30.            ::content > .selected {
  31.              font-weight: bold;
  32.              font-style: italic;
  33.            }
  34.          </style>
  35.          <ul on-tap="{{itemTapAction}}">
  36.            <content></content>
  37.          </ul>
  38.          <core-selection id="selection" multi
  39.                          on-core-select="{{selectAction}}"></core-selection>
  40.        </template>
  41.        <script>
  42.          Polymer('selection-example', {
  43.            itemTapAction: function(e, detail, sender) {
  44.              this.$.selection.select(e.target);
  45.            },
  46.            selectAction: function(e, detail, sender) {
  47.              detail.item.classList.toggle('selected', detail.isSelected);
  48.            }
  49.          });
  50.        </script>
  51.     </polymer-element>
  52.  
  53.     <selection-example>
  54.       <li>Red</li>
  55.       <li>Green</li>
  56.       <li>Blue</li>
  57.     </selection-example>
  58.  
  59. @element core-selection
  60. --><!--
  61. Fired when an item's selection state is changed. This event is fired both
  62. when an item is selected or deselected. The `isSelected` detail property
  63. contains the selection state.
  64.  
  65. @event core-select
  66. @param {Object} detail
  67.   @param {boolean} detail.isSelected true for selection and false for de-selection
  68.   @param {Object} detail.item the item element
  69. --><html><head><link rel="import" href="../polymer/polymer.html">
  70.  
  71. </head><body><polymer-element name="core-selection" attributes="multi" hidden="" assetpath="">
  72.   
  73. </polymer-element>
  74. <script src="core-selection-extracted.js"></script></body></html>